﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Waterfall with multiple series</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.waterfall.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data

            var data = [
                { year: 2002, male: 75.4, female: 58.1 },
                { year: 2003, male: 75.4, female: 58.7 },
                { year: 2004, male: 75.5, female: 59.4 },
                { year: 2005, male: 76.0, female: 60.0 },
                { year: 2006, male: 76.8, female: 61.1 },
                { year: 2007, male: 77.7, female: 62.1 },
                { year: 2008, male: 77.8, female: 62.8 },
                { year: 2009, male: 75.7, female: 62.3 },
                { year: 2010, male: 75.0, female: 62.0 },
                { year: 2011, male: 74.9, female: 62.2 },
                { year: 2012, male: 74.5, female: 62.4 },
                { year: 2013, male: 74.3, female: 62.6 },
                { year: 'Summary', male: 74.3, female: 62.6, summary: true }
            ];

            // convert raw data to differences
            for (var i = data.length - 2; i > 0; i--) {
                data[i].male -= data[i - 1].male;
                data[i].female -= data[i - 1].female;
            }

            // prepare jqxChart settings
            var settings = {
                title: "EU Employment rate trends by gender",
                description: "data source: Eurostat",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: data,
                colorScheme: 'scheme06',
                xAxis:
                {
                    type: 'basic',
                    dataField: 'year',
                    displayText: 'Year',
                    labels: { angle: 0 }
                },
                valueAxis:
                {
                    title: { text: 'Employment rate<br>' },
                    labels:
                    {
                        formatSettings:
                        {
                            decimalPlaces: 1,
                            sufix: '%'
                        }
                    }
                },
                seriesGroups:
                    [
                        {
                            type: 'waterfall',
                            toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                                var dataItem = data[itemIndex];

                                var val = Math.round(value * 100) / 100;

                                return '<DIV style="text-align:left"><b>' +
                                        ((itemIndex == data.length - 1) ? 'Summary:' : 'Year: ' + dataItem.year) + '</b>' +
                                        '<br />' + serie.displayText + ' ' + ((itemIndex != 0 && itemIndex != data.length - 1) ? 'change: ' : 'rate: ') + val + ' %' +
                                '</DIV>';
                            },
                            series: [
                                    {
                                        dataField: 'male',
                                        summary: 'summary',
                                        displayText: 'Male employment',
                                        colorFunction: function (value, itemIndex, serie, group) {
                                            if (itemIndex == data.length - 1)
                                                return '#3F3A3B'; // total

                                            return (value < 0) ? '#C30E1F' /* red */ : '#117406' /*green*/;
                                        }
                                    },
                                    {
                                        dataField: 'female',
                                        summary: 'summary',
                                        displayText: 'Female employment',
                                        colorFunction: function (value, itemIndex, serie, group) {
                                            if (itemIndex == data.length - 1)
                                                return '#4F4A4B'; // total

                                            return (value < 0) ? '#D30E2F' /* red */ : '#24A037' /*green*/;
                                        }
                                    }

                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>
</body>
</html>
